<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>百度首页vue</title>
    <style type="text/css">
    *{
		margin:0;
		padding:0;
		list-style:none;
			
	}
	/*顶部导航样式*/
    .nav{
		position:absolute;
        float:right;
        line-height:30px;
		height:30px;
		right:0;
      }
	.navList{
		display: inline-block;
		margin: 0 0 0 16px;
		padding: 0 10px;
		height: 30px;
	}
	.listStyle{
		background:#3385ff;        
	}
	.lastStyle{
		color:#ffffff;
		text-decoration:none;
	}
	.subnav{
		width:75px;
        background:#ffffff;
		position:relative;
		right:-486px;
		top:-30px;
    }
	/*中间输入框样式*/
	#mid{
		width:100%;
		height:235px;
		pisition:relative;
	}
	
	.mid{
	    width:50%; 
		height:150px;
		margin:auto;
		line-height:150px;
		margin-top:100px; 
		text-align:center;   
		float:center;
    }

    .input {
      width: auto;
      height: 55px;
      position: relative;
	  text-align:center;
    }

    .text {
      border: 1px solid #b6b6b6;
      width: 495px;
      background: #fff;
      height: 38px;
      line-height: 38px;
      font-size: 18px;
      padding: 3px 0 0 7px;
    }

    #btn {
      width: 90px;
      height: 38px;
	  line-height:38px;
      color: #fff;
      font-size: 16px;
      letter-spacing: 3px;
      background: #3385ff;
      border: .5px solid #2d78f4;
      margin-left: -5px;
      vertical-align: top;
      opacity: 0.9;
    }

    #btn a:hover {
      opacity: 1;
      box-shadow: 0 1px 1px #3385ff;
      cursor: pointer;
	  line-height:38px;
	  text-decoration:none;
    }
    
	#btn a{
		text-decoration:none;
	}
	
	.search_resul{
		width:505px;
		height:auto;
	}
	
	.search_result li{
		width:493px;
		line-height:30px;
		margin-left:419px;
		height:auto;
		text-align:left;
		border:1px solid #D8D8D8;
		list-style:none;
	}
	
	.search_result li:hover{
		cursor:pointer;
		background:#D8D8D8;
	}
	/*中间标签切换样式*/
	
	.zongjian{
		height:50px;
		width:800px;
		border:1px solid #D8D8D8;
		margin:auto;
		background:#D8D8D8;
		margin-left:0;
	}
	
	.centerNav{
		float:left;
		text-align:center;	
		height:50px;
	}
	.centerNav li{
		list-style:none;
		width:100px;
		line-height:50px;
		margin:auto;
	}
	
	
	#zj{
		width:1000px;
		height:400px;
		margin-left:300px;
	}
	
	.zj{
		width:800px;;
		height:40px;
		border:1px solid #D8D8D8;
	}
	
	.centerNav li{
		float:left;
		list-style:none;
	}
	.centerNav li:hover{
		cursor:pointer;
		background:gray;
		
	}
	
	.content{
		padding-top:29px;
		padding-left:10px;
		margin-top:28px;
		width:789px;
		height:400px;
		border:1px solid #D8D8D8;
	}
	
	
    /*底部*/
	#foot{
		width:100%;
		heght:500px;
		margin_top:500px;
	}
	
    .ewm{
        width:100%;
        height:60px;    
        margin-top:0px;
		

    }  
   .p_ewm{
        width:60px;
        height:60px;
        margin:0 auto;
        margin-top:10%;
    }
	.foot{
		width:100%;			
		height:50px;			
		margin:0 auto;		
		margin-top:45px;			
		text-align:center;			
		text-indent: 2em;			
		word-spacing:5px;
		color:black;
	}
	
	.p_foot{			
		text-indent: 2em;	
		margin-top:1%;
		font-size:12px;
	}

	#one{
		font-size:12px;
		color:black;
	}
	
    </style>
</head>
<body>
<div id= "app">
<!--     顶部导航       -->
    <div style="width:100%;height: 50px;">
		<div class="nav" >
		   <div class="navList" v-for="(list,index) in lists" @mouseenter="mouseover(index)" :class="{'listStyle':index==7}" >
				<a href="https://www.baidu.com" style="font-size:14px" :class="{'lastStyle':index==7}">{{ list.message }}</a>
		   </div>
			<div class="subnav" v-show="seen" @mouseleave="mouseout">
			  <li v-for="subnav in sublists"  style="text-align:center">
				<div>
					<img :src ='subnav.imgUrl'><br/><br/>
					<p class="subText" style="margin-top:-30px;margin-left:0;"><a href="https://www.baidu.com">
					{{subnav.subtext}}</a></p>
				</div>
			  </li>
			</div>
		</div>
	</div>
	
	<!--    中间输入框    -->
  <div id="mid">
  <!--图片-->
    <div class="mid" >
        <a href="https://www.baidu.com/s?wd=%E4%BB%8A%E6%97%A5%E6%96%B0%E9%B2%9C%E4%BA%8B&tn=SE_PclogoS_8whnvm25&sa=ire_dl_gh_logo&rsv_dl=igh_logo_pcs" target="_blank">
          <img  height=130 width=270 src="bd_logo1.png" title="百度一下你就知道"/>
        </a>  
    </div>
<!--输入框-->
    <div class="input" id="input">
       <input type="text" class="text" autofocus v-model="textInput" v-on:input="inputtext" placeholder="请输入关键字">
		
	   <button type="button" id="btn"><a href="message.html" target="_blank"> 百度一下</a></button>
	   <div class="search_result" v-show="seen">
			<li v-for="item in datas">
			{{ item.name }}
			</li>
		</div>
    </div>	
	
</div>	
	<!--中间导航转化-->
<div id="zj">
	<div class="zongjian" >
        <ul class="centerNav">
            <li 
            v-for="(item,index) in tabs" 
            :class="{active:index == num}"
             @click="tab(index)">{{item}}</li>
        </ul><br/>
		
        <div class="content">
            <div 
            v-for='(itemCon,index) in tabContents' 
            v-show=" index == num">{{itemCon}}</div>
        </div>
	</div>
	
 </div>
<!--底部-->
 <div id="foot">
<!--二维码-->
    <div class="ewm" >
        <p class="p_ewm" style="margin-left:48%;">
           <img  height=60 width=60 src="zbios_efde696.png" title="我是一个二维码"/><br/>
	&nbsp;&nbsp;百度
        </p>

    </div>

<!--底部链接-->
     <div class="foot">
		<p id="one"> 
		<a href="https://www.baidu.com/cache/sethelp/help.html">把百度设为主页</a>
		 <a href="http://home.baidu.com/">关于百度</a>
		 <a href="http://ir.baidu.com/phoenix.zhtml?c=188488&p=irol-irhome">About  Baidu</a>
		 <a href="http://e.baidu.com/?refer=888">百度推广</a>
		</p>

	   <p class="p_foot">
		 ©2019 Baidu
		 <a href="http://jianyi.baidu.com/">使用百度前必读 意见反馈 </a>
		 京ICP证030173号 
		 <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11000002000001">京公网安备11000002000001号 </a>
	   </p>
	 </div>
	</div>		
	
	
</div>	
	<script>
	var vm = new Vue({
		el:'#app',
		data:{
			//导航列表
			lists: [
			{ message: '新闻'},
			{ message: 'hao123'},
			{ message: '地图'},
			{ message: '视频'},
			{ message: '贴吧'},
			{ message: '学术'},
			{ message: '登录'},
			{ message: '更多产品'}
			],
			//更多产品的列表
			sublists:[
				 { imgUrl:'',subtext: '更多产品' },
				 { imgUrl:'picture.png',subtext: '音乐' },
				 { imgUrl:'picture.png',subtext: '图片' },
				 { imgUrl:'picture.png',subtext: '文库'},
				 { imgUrl:'picture.png',subtext: '音乐' },
				 { imgUrl:'picture.png',subtext: '图片' },
				 { imgUrl:'picture.png',subtext: '文库' },
				 { imgUrl:'<br/>',subtext: '全部产品' }
			 ],
			seen:false,
			//输入框
			textInput:"",
			seen:false,
			search_result:[
				{name:"apple"},
				{name:"我是vue"},
				{name:"个性设置，点我看看"},
				{name:"Windows"},
				{name:"beach"}
			],
			//标签切换
			tabs: ["我的关注", "新闻","导航"],
			tabContents: ["我的导航", "我关注的新闻","我关注的导航"],
			num: 0
			
		},
		methods:{
			//更多产品的列表
			mouseover:function(index){
				if(index==7){
					this.seen = true
				
				} else{
					console.log(this),
					this.seen = false
					 }
				},
			mouseout:function(){
				this.seen = false
			},
			//监听输入事件，当input中有内容时，下面的搜索列表显示出来
			inputtext(){
				if(this.textInput.length>0){
					this.seen = true;
				}else{
					this.seen = false
				}
			},
			//标签切换
			tab(index) {
				this.num = index;
			}
		},
		//计算属性，当输入内容的时候下面的方法就会根据你输入的内容来过滤search_result数组中的数据
		computed: {
			datas() {
				var textInput = this.textInput;
				if (textInput) {
					return this.search_result.filter(function(product) {
						return Object.keys(product).some(function(key) {
							return String(product[key]).toLowerCase().indexOf(textInput) > -1
						})
					})
				}
				return this.products
			}
	 }
	})
	</script>
	

</body>
</html>
 